<template>
  <div>
    <vue-dropzone
      ref="myVueDropzone"
      id="dropzone"
      class="my-vue-dropzone-multiple"
      v-if="isShow && dropzoneOptions && dropzoneOptions.paramName"
      :options="dropzoneOptions"
      @vdropzone-success="uploadSuccessed"
      @vdropzone-max-files-exceeded="maxFilesExceeded"></vue-dropzone>
  </div>
</template>
<script>
import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.min.css'

// TODO 配置文档地址
// 官方文档: https://www.dropzonejs.com/#config-uploadMultiple
// 第三方文档: https://rowanwins.github.io/vue-dropzone/docs/dist/index.html#/installation
// 文件上传配置
var dropzoneOptions = {
  // 文件post表单名称
  paramName: 'myUploadFile',
  // 最大上传文件数量
  maxFiles: 10,
  // 允许文件类型
  acceptedFiles: 'image/*',
  // 显示预览图-宽度
  thumbnailWidth: 120,
  // 显示预览图-高度
  thumbnailHeight: 120,
  // 文件大小限制
  maxFilesize: 1.5,
  // 是否允许删除文件
  addRemoveLinks: true,
  // 允许队列加载文件
  autoQueue: true,

  // 提示信息
  dictDefaultMessage: '请点击上传图片',
  dictFileTooBig: '当前文件大小: {{filesize}}M,超过允许最大: {{maxFilesize}}M',
  dictResponseError: '服务器返回错误: {{statusCode}}',
  dictCancelUpload: '取消上传',
  dictUploadCanceled: '取消上传',
  dictCancelUploadConfirmation: '您确认要取消已上传的文件吗?',
  dictRemoveFile: '移除文件',
  dictRemoveFileConfirmation: '您确认要取消当前选择的文件吗',
  dictMaxFilesExceeded: '最大文件选择数量不能超过: {{maxFiles}}个',
  dictFallbackMessage: '浏览器不支持',
  dictInvalidFileType: '不支持当前上传类型'
}
// 文件上传组件
export default {
  name: 'CommonFormUploadFileMultiple',
  components: {
    vueDropzone: vue2Dropzone
  },
  props: {
    // 允许上传类型
    acceptedFiles: String,
    // 字段名称
    field: String,
    // 最大上传数量
    maxFiles: Number,
    // 回调方法
    callBack: Function,
    // 初始化数组
    value: Array
  },
  watch: {
    isShow: function (value) {
      if (value === true) {
        this.initConfig()
      }
    }
  },
  mounted: function () {
    var $this = this
    $this.initConfig()
  },
  data: function () {
    return {
      dropzoneOptions: {},
      isShow: true,
      completedUploadFileArr: []
    }
  },
  methods: {
    // 初始化配置信息
    initConfig: function () {
      this.completedUploadFileArr = []
      // 上传文件数量限制
      if (this.$props.maxFiles) {
        dropzoneOptions.maxFiles = this.$props.maxFiles
      }
      // 允许上传文件类型: image/*
      if (this.$props.acceptedFiles) {
        dropzoneOptions.acceptedFiles = this.$props.acceptedFiles
      }
      // 服务器上传地址
      dropzoneOptions.url = this.UploadFileUrl
      // 表单头部信息
      dropzoneOptions.headers = this.getHeader()
      this.dropzoneOptions = dropzoneOptions

      // 检查默认图片组
      var $this = this
      setTimeout(function () {
        // console.log($this.$refs.myVueDropzone.manuallyAddFile)
        $this.initAddImageArr()
      }, 100)
      this.$forceUpdate()
    },
    // 初始化增加图片组
    initAddImageArr: function () {
      if (this.$props.value && this.$props.value.length > 0) {
        var $this = this
        this.$props.value.forEach(function (url, key) {
          var file = {size: 0, name: '图片-' + key, type: 'image/png'}
          $this.completedUploadFileArr.push(url)
          $this.$refs.myVueDropzone.manuallyAddFile(file, url)
        })
      }
    },
    // 上传完毕
    uploadSuccessed: function (file, response) {
      if (response.code === 0) {
        // this.tip('上传成功!')
        // 如果超过最大数量的话
        if (this.completedUploadFileArr.length >= this.$props.maxFiles) {
          return
          // this.completedUploadFileArr = this.completedUploadFileArr.slice(0, 1)
        }
        this.completedUploadFileArr.push(response.data)

        // 回调form
        if (typeof this.$props.callBack !== 'function') {
          return
        }
        // 返回所有成功上传列表
        this.$props.callBack(this.$props.field, this.completedUploadFileArr)
      } else {
        this.tip('上传出错:' + response.message, 'error')
      }
    },
    maxFilesExceeded: function (file) {
      // console.log('超出最大数量')
      this.tip('超出最大数量:' + this.dropzoneOptions.maxFiles, 'error')
      file.previewElement.remove()
      // vue2Dropzone.removeFile(file)
      // setTimeout(function () {
      //   file.previewElement.remove()
      // }, 1500)
      // console.log()
    }
  }
}
</script>
<style>
.my-vue-dropzone-multiple {
  padding: 5px;
  border: 1px solid #f1f1f1;
}

.my-vue-dropzone-multiple .dz-default.dz-message {
  margin: 0px;
  position: relative;
  top: 45px;
}

.my-vue-dropzone-multiple .dz-preview .dz-image {
  border-radius: 5px;
}

.my-vue-dropzone-multiple .dz-preview .dz-details {
  background: rgba(200, 200, 200, 0.5);
}

.my-vue-dropzone-multiple .dz-preview .dz-remove {
  color: #c90008;
  bottom: -5px;
  text-align: center;
  width: 100%;
}

.my-vue-dropzone-multiple .dz-preview.dz-image-preview {
  margin: 5px;
}

.my-vue-dropzone-multiple .dropzone .dz-preview .dz-image img {
  max-width: 120px;
  max-height: 120px;
}
</style>
